<template>
    <div id="find" class="ww clearfix">
        <div class="left-box">
            <public-radio :allData="publicChannel"></public-radio>
            <musician-radio :allData="musicianChannel"></musician-radio>
            <rank></rank>
        </div>
        <div class="right-box">

        </div>
    </div>
</template>

<script>

    // 音乐电台组件
    import publicRadio from "@/components/radio/publicRadio"
    import musicianRadio from "@/components/radio/musicianRadio"
    import rank from "@/components/rank/rank"

    export default {
        name: "Find",
        data() {
            return {
                // 公共频道
                publicChannel: [],
                // 音乐人频道
                musicianChannel: []
            }
        },
        methods: {
            getRadioData() {
                this.axios.get("musicBroadcasting")
                    .then(res => {
                        this.publicChannel = res.data.result[0];
                        this.musicianChannel = res.data.result[1];
                        if (this.publicChannel.channellist.length > 8) {
                            this.publicChannel.channellist = this.publicChannel.channellist.splice(0, 8)
                        }
                        if (this.musicianChannel.channellist.length > 4) {
                            this.musicianChannel.channellist = this.musicianChannel.channellist.splice(0, 4)
                        }
                        // console.log(this.musicianChannel)
                    })
            }
        },
        created() {
            this.getRadioData()
        },
        components: {
            publicRadio,
            musicianRadio,
            rank
        }
    }
</script>

<style scoped lang="less">
    #find {
        border-left: 1px solid #d3d3d3;
        border-right: 1px solid #d3d3d3;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        // 左侧
        .left-box {
            flex: 0 0 729px;
            padding: 20px;
            /*background-color: pink;*/
        }

        .right-box {
            flex: 0 0 249px;
            padding: 20px;
            background-color: #fff;
            border-left: 1px solid #d3d3d3;
        }
    }
</style>
